import {
  Button,
  Space,
  Layout,
  Input,
  Card,
  Select,
  Table,
  Flex,
  TableColumnsType,
  Drawer,
  Form,
  InputNumber,
} from "antd";
import { useState } from "react";
import { useSelector } from "react-redux";
import {
  selectAllCategory,
  selectAllWarehouse,
} from "../../../store/slices/productsSlice.ts";

interface DataType {
  key: string;
  name: string;
  category: string;
  quantity: number;
  store: string;
  note: string;
}

const columns: TableColumnsType<DataType> = [
  { title: "编号", dataIndex: "id" },
  { title: "名称", dataIndex: "name" },
  {
    title: "分类",
    dataIndex: "category",
    key: "category",
    render: (text) => <a>{text}</a>,
  },
  { title: "价格" },
  { title: "库存", dataIndex: "quantity" },
  { title: "规格", dataIndex: "specs" },
  { title: "最高库存预警", dataIndex: "highestQuantityWarning" },
  { title: "最低库存预警", dataIndex: "lowestQuantityWarning" },
  { title: "备注", dataIndex: "note", key: "note" },
  { title: "仓库", dataIndex: "store" },
  { title: "创建时间", dataIndex: "createTime" },
  { title: "操作", dataIndex: "operation", fixed: "right" },
];

const dataSource: DataType[] = [
  {
    key: "1",
    name: "测试",
    category: "零食",
    quantity: 10,
    store: "仓库1",
    note: "55",
  },
];

export default function Inventory() {
  const warehouses = useSelector(selectAllWarehouse);
  const categories = useSelector(selectAllCategory);
  // 筛选仓库 * -1 全部仓库
  const [crtWarehouse, setCrtWarehouse] = useState(-1);
  // 筛选分类 * -1 全部分类
  const [crtCategory, setCrtCategory] = useState(-1);

  const [productDrawer, setProductDrawer] = useState(false);

  return (
    <>
      <Flex vertical style={{ padding: "10px" }} gap="small">
        <Card title="筛选">
          <Space>
            <Input.Search placeholder="请输入产品名称" />
            <Select
              value={crtWarehouse}
              style={{ width: 120 }}
              options={[{ id: -1, wName: "全部仓库" }, ...warehouses]}
              fieldNames={{ value: "id", label: "wName" }}
              onSelect={(v) => setCrtWarehouse(v)}
            />
            <Select
              value={crtCategory}
              style={{ width: 120 }}
              options={[{ id: -1, cName: "全部分类" }, ...categories]}
              fieldNames={{ value: "id", label: "cName" }}
              onSelect={(v) => setCrtCategory(v)}
            />
          </Space>
        </Card>
        <Card
          title="商品列表"
          extra={
            <Button type="primary" onClick={() => setProductDrawer(true)}>
              新增商品
            </Button>
          }>
          <Table<DataType> columns={columns} dataSource={dataSource} />
        </Card>
      </Flex>
      <Drawer
        title="新增商品"
        open={productDrawer}
        onClose={() => setProductDrawer(false)}
        size="large">
        <Form>
          <Form.Item
            label="名称"
            rules={[{ required: true, message: "请输入商品名称" }]}>
            <Input />
          </Form.Item>
          <Form.Item label="分类">
            <Select
              options={categories}
              fieldNames={{ value: "id", label: "cName" }}
            />
          </Form.Item>
          <Form.Item label="仓库">
            <Select
              options={warehouses}
              fieldNames={{ value: "id", label: "wName" }}
            />
          </Form.Item>
          <Form.Item label="数量">
            <InputNumber defaultValue={0} min={0} changeOnWheel={true} />
          </Form.Item>
          <Form.Item label="备注">
            <Input />
          </Form.Item>
        </Form>
      </Drawer>
      );
    </>
  );
}
